<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>用户反馈</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/view-design/dist/styles/iview.css">
    <script  src="/js/jquery.min.js"></script>
    <script  src="/js/pinyin.js"></script>
    <script src="/js/vue.js"></script>
    <script  src="/js/iview.js"></script>
    <script  src="/js/axios.min.js"></script>
	<script  src="/js/exif.js"></script>

    <style type="text/css">
        .ivu-input{
            height: 50px;
        }
        .demo-upload-list{
            display: inline-block;
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            border: 1px solid transparent;
            border-radius: 4px;
            overflow: hidden;
            background: #fff;
            position: relative;
            box-shadow: 0 1px 1px rgba(0,0,0,.2);
            margin-right: 4px;
        }
        .demo-upload-list img{
            width: 100%;
            height: 100%;
        }
        .demo-upload-list-cover{
            display: none;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,.6);
        }
        .demo-upload-list:hover .demo-upload-list-cover{
            display: block;
        }
        .demo-upload-list-cover i{
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            margin: 0 2px;
        }
        .inp{
            margin-bottom: 10px;
        }
        .submit-btn{
            height: 50px;
            line-height: 50px;
            margin:20px 0;
        }
        .manufactor{
            overflow: hidden;
            margin-top: 10px;
        }
        .ivu-select-single .ivu-select-selection{
            height: 50px;
        }
        .ivu-select-single .ivu-select-selection .ivu-select-placeholder, .ivu-select-single .ivu-select-selection .ivu-select-selected-value{
            height: 48px;
            line-height: 48px;
        }
        .manu .ivu-select-input{
            height: 48px;
            line-height: 48px;
        }
    </style>
</head>
<body>
<div id="app" class="col-md-12" style="margin: 10px;position:relative;">
	
    <i-input v-model="name" placeholder="请输入姓名" class="inp"></i-input>
	<i-input v-model="phone" placeholder="请输入电话" class="inp"></i-input>
	<i-input v-model="nickName" placeholder="请输入头条号昵称" class="inp"></i-input>
    <i-input v-model="shop" placeholder="请输入店铺" class="inp"></i-input>
	<i-input v-model="orderNumber" placeholder="请输入订单号" class="inp"></i-input>
    <i-input v-model="remarks" placeholder="其他问题" class="inp"></i-input>
	
    <div style="margin-top:10px;" >
        <Upload ref="upload" action="/api/upload/store" :data="data"  multiple  :show-upload-list="showUpList" style="height: 50px;" :on-success="onSucc">
            <i-button icon="ios-cloud-upload-outline">图片上传</i-button>
        </Upload>
    </div>

    <div class="demo-upload-parent">
        <div class="demo-upload-list" v-for="(item,index) in uploadList">
            <img :src="item">
            <div class="demo-upload-list-cover">
                <Icon type="ios-trash-outline" @click.native="handleRemove(index)"></Icon>
            </div>
        </div>
    </div>

  
    <i-button  type="success" long class="submit-btn" @click='submit' >提交</i-button>
	<Spin size="large" fix v-if="spinShow"></Spin>
</div>
<script>
    vm = new Vue({
        el: '#app',
        data() {
            return {
				name:'',
				phone:'',
				nickName:'',
				shop:'',
				orderNumber:'',
				remarks:'',
				
				spinShow:false,
                manufactorInp:'',
                inpColor:'',inpSize:'',inpCount:'',
                model1: '',
                List1: [],
                data:{
                    dir:'products',
                    type : 'Image'
                },
                showUpList:false,
                uploadList:[],
                imgName: '',
                visible: false,
                title:'',
				material:'',
                recommend:'',
                price:'',
                originPrice:'',
				creator:'',
                code:'',
				codeOutside:'',
                intt:'',
                data6: []
            }
        },
        mounted() {
            
        },
        
        methods: {
            onSucc(response){
                data = response;
                this.uploadList.push(data.result);
            },
            
            handleView (name) {
                this.imgName = name;
                this.visible = true;
            },
            handleRemove (index) {
                this.uploadList.splice(index, 1);
            },

            
            submit(){

				if(vm.name.trim()==''){
                    this.$Message.info('请输入姓名');
                    return;
                }
				if(vm.phone.trim()==''){
                    this.$Message.info('请输电话号码');
                    return;
                }
                if(vm.orderNumber.trim()==''){
                    this.$Message.info('请输入订单号');
                    return;
                }
				if(vm.remarks.trim()==''){
                    this.$Message.info('请输入其他问题');
                    return;
                }
				
				vm.spinShow=true;
				var arr=[];
				let uploadListLen=this.uploadList.length;
				console.log('图片张数'+uploadListLen);
				if(uploadListLen>0){
                    
					up(0);
					function up(index){
						var img = new Image();
						img.src = vm.uploadList[index];
						img.setAttribute("crossOrigin",'Anonymous');
						img.onload = function() {
							EXIF.getData(img, function() {
								var or = EXIF.getTag(this, "Orientation");
								if(or==6){
									var realWidth = img.width;
									var realHeight = img.height;
									var canvas = document.createElement("canvas");
									var ctx = canvas.getContext('2d');
									var base64;
									canvas.width = realHeight/3;
									canvas.height = realWidth/3;
									ctx.rotate(Math.PI/180*90);
									ctx.drawImage(img,0,0,realWidth,realHeight, 0, -canvas.width,canvas.height,canvas.width);
									base64 = canvas.toDataURL('image/jpeg', 1);
									axios.post('/api/upload/bs', { 
										file:base64,
										dir:'products',
										type:'Image'
									}).then((response) => {
										console.log(response.data.result);
										arr.push(response.data.result);
										index++;
										if(index==uploadListLen){
											console.log(arr);
											let time=(new Date()).getTime();
											axios.post('/api/feedback/input', {
												"name": vm.name.trim(),
												"tel": vm.phone.trim(),
												"nickname": vm.nickName.trim(),
												"shop":vm.shop.trim(),
												"order_id":vm.orderNumber.trim(),
												"imgs":JSON.stringify(arr),
												"question":vm.remarks.trim()

											}).then((response) => {
												vm.spinShow=false;
												vm.$Message.info(response.data.msg);
												window.location.reload();
											}).finally(function(){
											})
										}
										else{
											up(index);
										}
									})
									
								}
								else{
									arr.push(vm.uploadList[index]);
									index++;
									if(index==uploadListLen){
										console.log(arr);
										let time=(new Date()).getTime();
										axios.post('/api/feedback/input', {
												"name": vm.name.trim(),
												"tel": vm.phone.trim(),
												"nickname": vm.nickName.trim(),
												"shop":vm.shop.trim(),
												"order_id":vm.orderNumber.trim(),
												"imgs":JSON.stringify(arr),
												"question":vm.remarks.trim()
										}).then((response) => {
											vm.spinShow=false;
											vm.$Message.info(response.data.msg);
											window.location.reload();
										}).finally(function(){
										})
									}
									else{
										up(index);
									}
								}
							});
						};
						
						
						
						
					}
				
                }
				else{
					axios.post('/api/feedback/input', {
						"name": vm.name.trim(),
						"tel": vm.phone.trim(),
						"nickname": vm.nickName.trim(),
						"shop":vm.shop.trim(),
						"order_id":vm.orderNumber.trim(),
						"imgs":JSON.stringify(arr),
						"question":vm.remarks.trim()

					}).then((response) => {
						vm.spinShow=false;
						vm.$Message.info(response.data.msg);
						window.location.reload();
					}).finally(function(){
					})
				}
				
			},

            remove (index) {
                console.log(index);
                this.data6.splice(index, 1);
                console.log(this.data6);
            }

        },

    });
</script>
</body>
</html>
